<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商城</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/theme-chalk/display.css"></script>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      .el-carousel__container img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>
          <el-row>
            <el-col
              :span="4"
              style="display: flex; flex-direction: row; align-items: center"
            >
              <img src="./static/images/logo.png" style="height: 60px" />
              <h2 style="padding-left: 4px">技术社区</h2>
            </el-col>
            <el-col :span="8">
              <el-menu
                :default-active="activeIndex"
                mode="horizontal"
                style="border-bottom: none !important"
              >
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">文章</el-menu-item>
                <el-menu-item index="3">课程</el-menu-item>
                <el-menu-item index="4">商城</el-menu-item>
              </el-menu>
            </el-col>
            <el-col
              :span="8"
              style="height: 60px; line-height: 60px"
              class="hidden-only-sm"
            >
              <el-input placeholder="请输入关键字" />
            </el-col>
            <el-col
              :span="4"
              style="text-align: right; height: 60px; line-height: 60px"
              class="hidden-only-sm;"
            >
              <div v-if="!isLoggedIn">
                <el-link type="primary" href="login.html">登录</el-link>
                <el-link
                  type="primary"
                  style="padding-left: 4px"
                  href="reg.html"
                  >注册</el-link
                >
              </div>
              <div v-else>
                <img
                  src="./static/images/avatar.png"
                  style="width: 30px; height: 30px; border-radius: 50%"
                />
                <el-link
                  type="primary"
                  style="padding-left: 4px"
                  href="person.html"
                  >个人中心</el-link
                >
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-container style="width: 80%; margin: 0 auto;">
          <el-main>
            <el-row>
              <el-col
                :xs="12"
                :sm="8"
                v-for="(product,i) in productList"
                :key="i"
              >
              <el-card shadow="hover" style="margin: 2%;">
                <div style="display: flex; justify-content: center;">
                  <img :src="product.img" style="width: 90%; height: 50%;" />
                </div>
                <p style="width: 90%;">{{product.name}}</p>
                <p style="display: flex; gap: 20%;">
                  <span>价格：￥{{product.price}}</span>
                  <span>库存：{{product.stock}}件</span>
                </p>
                <el-button @click="addToCart(product)">加入购物车</el-button>
              </el-card>
              </el-col>
            </el-row>
          </el-main>

          <el-aside>
            <el-card style="margin-top: 10%;">
              <h2 class="fas fa-shopping-cart">购物车</h2>
              <div v-if="cartItems.length>0">
                <div v-for="(item,i) in cartItems" :key="i">
                  <div style="display: flex; flex-direction: row; align-items: center">
                  <img :src="item.img" style="width: 50px; height: 50px" />
                  {{item.name}}
                  </div>
                  <div>
                    <span style="margin-right: 9%;">单价：￥{{item.price}}</span>
                    <el-input-number v-model="item.number" :min="0" :max="item.stock" @change="handlechange(item)"></el-input-number>
                    <el-divider style="margin: 10px 0" />
                  </div>
                </div>
                <div  style="text-align: right;">
                  <p>总价：￥{{totalPrice}}</p>
                  <el-button type="primary" plain @click="clearCart">清空购物车</el-button>
                  <el-button type="primary" @click="submitOrder">结算</el-button>
                </div>
              </div>
              <div v-else>
                <el-empty description="暂无商品"></el-empty>
                <p>总价：￥{{totalPrice}}</p> 
                <el-button type="primary" @click="submitOrder">结算</el-button>
              </div>
            </el-card>
          </el-aside>
        </el-container>
        <el-footer>
          <el-row>
            <el-col
              :xs="24"
              :lg="8"
              style="display: flex; flex-direction: row; align-items: center"
            >
              <div>
                <img src="./static/images/logo.png" style="height: 100px" />
              </div>
              <div>
                <h2 style="padding-left: 4px">技术社区</h2>
                <p style="padding-left: 4px">
                  致力构建一个专业的IT技术交流社区
                </p>
              </div>
            </el-col>
            <el-col
              :xs="24"
              :lg="10"
              style="
                display: flex;
                flex-direction: column;
                text-align: center;
                padding-top: 3%;
              "
            >
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  gap: 70px;
                  padding-left: 15px;
                "
              >
                <el-link type="primary">首页</el-link>
                <el-link type="primary">咨询</el-link>
                <el-link type="primary">课程</el-link>
                <el-link type="primary">商城</el-link>
              </div>
              <div style="display: flex; flex-direction: row; gap: 43px">
                <el-link type="primary">关于我们</el-link>
                <el-link type="primary">使用手册</el-link>
                <el-link type="primary">隐私条款</el-link>
                <el-link type="primary">建议反馈</el-link>
              </div>
            </el-col>
            <el-col :xs="24" :lg="6">
              <div>
                <h2>联系我们</h2>
                <p>电话：123456789</p>
                <p>邮箱：software@develop.com</p>
              </div>
            </el-col>
            <el-col :xs="24" :lg="24" style="background-color: deepskyblue">
              <p style="text-align: center">软件开发工作室版权所有</p>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </div>
  </body>
  <script>
    var App = {
      data() {
        return {
          name: "hello Vue!",
          activeIndex: "1",
          isLoggedIn: false,
          productList: [
            {
              id:"1",
              type: "徽章",
              name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
              price: 29,
              stock: 30,
              img: "./static/images/product01.png",
            },
            {
              id:"2",
              type: "帆布包",
              name: "【it社区文创】「极简主义」帆布包",
              price: 79,
              stock: 60,
              img: "./static/images/product02.png",
            },
            {
              id:"3",
              type: "T恤",
              name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
              price: 12,
              stock: 100,
              img: "./static/images/product03.png",
            },
            {
              id:"4",
              type: "U盘",
              name: "IT达人必备：128GB紫色技术社区U盘",
              price: 39,
              stock: 80,
              img: "./static/images/product04.png",
            },
            {
              id:"5",
              type: "笔记本",
              name: "高端皮质IT笔记本，简约设计尽显专业气质",
              price: 29,
              stock: 30,
              img: "./static/images/product05.png",
            },
            {
              id:"6",
              type: "鼠标垫",
              name: "文创字母鼠标垫「IT技术社区专属」",
              price: 79,
              stock: 60,
              img: "./static/images/product06.png",
            },
            //{ id:"7",type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: './static/images/product07.png' },
            //{ id:"8",type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: './static/images/product08.png' },
          ],
          cartItems: [], // 用于存储购物车中的商品
          //totalPrice: 0, // 用于存储购物车中商品的总价
        };
      },
      methods: {
        // 添加商品到购物车
        addToCart(product) {
          const cartItem = this.cartItems.find((item)=>{
              item.id === product.id
          })
          if (cartItem) {
            cartItem.number++;
          }
          else {
            this.cartItems.push({
              ...product,
              number: 1,
            });
          }
          //this.calcPrice();
        },
        // 更新购物车中商品的数量
        handlechange(item) {
          if (item.number<=0) {
            this.removeFromCart(item);
          }
          //this.calcPrice();
        },
        // 从购物车中移除商品
        removeFromCart(item) {
          const index = this.cartItems.indexOf(item);
          if(index>-1){
            this.cartItems.splice(index,1);
          }
        },
        //计算购物车中商品的总价
        //calcPrice() {
        //  this.totalPrice = this.cartItems.reduce((total, item) => {
        //    return total + item.price * item.number;
        //  }, 0);
        //},
        // 清空购物车
        clearCart() {
          this.cartItems = [];
          this.totalPrice = 0;
        },
      },
      computed:{
        // 计算购物车中商品的总价
        totalPrice() {
            return   this.totalPrice = this.cartItems.reduce((total, item) => {
            return total + item.price * item.number;
          }, 0);
      }},
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
  </script>
</html>
